<template>
	<!-- 歌单界面 -->
  <transition name="slide">
    <music-list :title="title" :bg-image="bgImage" :songs="sphp" v-if="sphp"></music-list>
  </transition>
</template>

<script >
  import MusicList from 'components/music-list/music-list'
  import {getSongList} from 'api/recommend'
  import {ERR_OK,ERR_GO} from 'api/config'
  import {mapGetters} from 'vuex'
  import {createSong} from 'common/js/song'
	import {RenTop} from 'common/js/mixin'
  import axios from 'axios'
  export default {
	mixins: [RenTop],
    computed: {
      title() {
        return this.disc.name
      },
      bgImage() {
        return this.disc.pic
      },
      ...mapGetters([
        'disc'
      ])
    },
    data() {
      return {
				sphp:[]
      }
    },
    created() { //一点进来就获取数据
      this._getSongList()
    },
    methods: {
      _getSongList() {
        if (!this.disc.id) {//没有Id直接退回
          this.$router.push('/recommend')
          return
        }// this.getSongList() //有ID请求数据
				let url="https://api.bzqll.com/music/tencent/songList?key=579621905&id="+this.disc.id
				axios.get(url)
				.then((res)=>{
					this.sphp=res.data.data.songs
				}).catch((err)=>{
					 console.log("disc页面歌单出错")
				})				
			},
    },
    components: {
      MusicList
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .slide-enter-active, .slide-leave-active
    transition: all 0.3s

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
</style>